<template>
  <div>
    <div class="all">
      <p class="result">本次考试分数</p>
      <p class="number">{{score}}</p>
      <p class="right">正确率</p>
      <p class="p">{{score}}%</p>
      <p class="check" @click="toWrongTest">查看错题</p>
      <div style="margin-top: 10%">
        <div class="home_icon">
          <van-icon name="thumb-circle-o" />
          <div class="backtohome">重新考试</div>
        </div>
        <div class="home_icon">
          <van-icon name="edit" />
          <div class="backtohome" @click="toList">返回考试</div>
        </div>
        <div class="home_icon">
          <van-icon name="apps-o" />
          <div class="backtohome" @click="toBand">返回主页</div>
        </div>
      </div>

    </div>
  </div>

</template>
<style >
page{
  background-image: url("../../../static/images/examresult .png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-position: initial;
  background-size: cover;
  backgroundRepeat: no-repeat;

}
.number{
  font-size: 70rpx;
  font-weight: bold;
  color: white;
  margin-top: 20rpx;
}
.p{
  font-size: 40rpx;
  font-weight: bold;
  margin-top: 20rpx;
  color: white;
  line-height: 100rpx;
}
  .right{
    font-size: 40rpx;
    font-weight: bold;
    margin-top: 30rpx;
    color: white;
    line-height: 100rpx;
  }
  .all{
    display: flex !important;
    flex-direction: column ;
    align-items: center !important;
  }

 .result{
   font-size: 60rpx;
   font-weight: bold;
   color: white;
 }
  .check{
    background-color: #fffeff !important;
    margin-top: 90rpx;
    font-size: 50rpx;
    line-height: 60rpx;
     width: 300rpx;
    border:1rpx solid #eee;
    color: #949494;
    line-height: 80rpx;
    text-align: center;
    border-radius: 30rpx;
  }
  .backtoexam{
    background-color: #7aa7ba !important;
    margin-top: 220rpx;
    font-size: 50rpx;
    line-height: 100rpx;
    width: 300rpx;
    border:1rpx solid #eee;
    color: #fffeff;
    line-height: 80rpx;
    text-align: center;
    border-radius: 30rpx;

  }
  .newexam{
    background-color: #7aa7ba !important;
    margin-top: 100rpx;
    font-size: 50rpx;
    line-height: 100rpx;
    width: 300rpx;
    border:1rpx solid #eee;
    color: #fffeff;
    line-height: 80rpx;
    text-align: center;
    border-radius: 30rpx;
  }
  .home_icon{
    font-size: 100rpx;
    margin-top: 12%;
    display: flex;
    line-height: 80rpx;
    text-align: center;
    line-height: 100rpx;
  }
  .backtohome{
    margin-left: 20rpx;
    background-color: #7aa7ba !important;
    font-size: 50rpx;
    width: 300rpx;
    border:1rpx solid #eee;
    color: #fffeff;
    border-radius: 30rpx;
  }
</style>
<script>
  import { mapState } from 'vuex'

  export default {
    name: 'Examresult',
    computed: {
      ...mapState(['score'])
    },
    methods: {
      toList () {
        wx.redirectTo({url: '../list/main'})
      },
      toBand () {
        wx.switchTab({url: '../band/main'})
      },
      toWrongTest () {
        wx.navigateTo({url: '../examdetail/main'})
      },
      toExam () {
        wx.redirectTo({url: '../exam/main'})
      }
    }
  }
</script>
